<template>
  <div>
    <van-cell
      icon="search"
      v-for="(item, index) in newList"
      :key="index"
      @click="$emit('updateKeywords', List[index])"
    >
      <template #title> <span v-html="item"></span> </template
    ></van-cell>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { getSearchJyAPI } from '@/api'
export default {
  data() {
    return {
      List: []
    }
  },
  props: {
    keywords: {
      type: String,
      require: true
    }
  },
  methods: {
    getSearchJy: debounce(async function () {
      const { data } = await getSearchJyAPI(this.keywords)
      this.List = data.data.options.filter(Boolean)
    }, 300)
  },
  watch: {
    keywords: {
      handler() {
        this.getSearchJy()
      },
      immediate: true
    }
  },
  computed: {
    newList() {
      const req = new RegExp(this.keywords, 'ig')
      return this.List.map((item) => {
        return item.replace(
          req,
          (match) => `<span style='color:red'>${match}</span>`
        )
      })
    }
  }
}
</script>

<style></style>